<template>
	<view class="main-container">
		<view class="nav-list">
			<view
				class="nav-list-item"
				v-for="(item, index) in navList"
				:key="index"
				@click="handleRedirect(item)"
				:class="['bg-' + item.background + '-gradient']"
				:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
			>
				<view class="nav-title">{{ item.title }}</view>
				<view class="iconfont nav-item-icon" :class="'icon-' + item.icon"></view>
				<view class="doc-dot doc-dot1" :class="['bg-' + item.background + '-gradient']"></view>
				<view class="doc-dot doc-dot2" :class="['bg-' + item.background + '-gradient']"></view>
				<view class="doc-dot doc-dot3" :class="['bg-' + item.background + '-gradient']"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navList: [
				{
					title: '信息查询',
					url: 'yiqing',
					background: 'orange',
					icon: 'xinguan'
				},
				{
					title: '车标查询',
					url: 'car',
					background: 'mauve',
					icon: 'car'
				},
				{
					title: '在线翻译',
					url: 'fanyi',
					background: 'cyan',
					icon: 'fanyi'
				},
				{
					title: '天气查询',
					url: 'tianqi',
					background: 'weather',
					icon: 'tianqi'
				},
				{
					title: '土味情话',
					url: 'qinghua',
					background: 'grey',
					icon: 'qinghua'
				},
				{
					title: '舔狗语录',
					url: 'dog',
					background: 'brown',
					icon: 'dog'
				},
			]
		};
	},
	onLoad() {},
	methods: {
		handleRedirect(val) {
			uni.redirectTo({
				url: `../${val.url}/index?background=${val.background}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main-container {
	height: 100vh;
	width: 100%;
	position: relative;
	background: url(../../static/4put2.png) no-repeat;
	background-size: contain;
	.nav-list {
		position: absolute;
		top: 25%;
		left: 25px;
		right: 25px;
		.nav-list-item {
			box-sizing: border-box;
			padding: 68rpx 20px;
			color: #fff;
			margin-bottom: 20px;
			border-radius: 6px;
			font-size: 34rpx;
			position: relative;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			z-index: 20;
			.nav-item-icon {
				font-size: 60rpx;
			}
			.doc-dot {
				position: absolute;
				z-index: -1;
				border-radius: 50%;
				transition: all 0.6s cubic-bezier(0.08, 0.82, 0.17, 1);
				opacity: 0.3;
				&.doc-dot1 {
					width: 400rpx;
					height: 400rpx;
					left: 0;
					top: auto;
					right: auto;
					bottom: -300rpx;
					filter: hue-rotate(30deg) brightness(160%);
				}
				&.doc-dot2 {
					left: -40px;
					top: auto;
					right: auto;
					bottom: -20rpx;
					width: 300rpx;
					height: 300rpx;
					filter: brightness(80%);
				}
				&.doc-dot3 {
					top: -120rpx;
					right: -120rpx;
					opacity: 0.6;
					width: 240rpx;
					height: 240rpx;
					filter: brightness(120%);
				}
			}
		}
	}
}
</style>
